<template>
  <div class="parkMonitor">
    <p class="title">车位实时检测 >></p>
    <div class="table">
      <div class="roll_box">
        <p class="roll_box_title">
          <span>地区</span>
          <span>总车位</span>
          <span>已使用</span>
          <span>未使用</span>
        </p>
        <ul class="rollone">
          <li class="roll_content" v-for="item in tableData">
            <span>{{item.date}}</span>
            <span style="color:#FFBF00;">{{item.name}}</span>
            <span style="color:#00AAED;">{{item.address}}</span>
            <span style="color:#FF5E25;">{{ (item.name - item.address)}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'parkMonitor',
    data() {
      return {
        tableData: [
          {
            date: '长安区',
            name: '3428',
            address: '3014'
          },
          {
            date: '裕华区',
            name: '4125',
            address: '3892'
          },
          {
            date: '桥西区',
            name: '2415',
            address: '2235'
          },
          {
            date: '新华区',
            name: '2485',
            address: '2358'
          },
          {
            date: '高新区',
            name: '1425',
            address: '1136'
          }],
      }
    },
    mounted() {

    },
    methods: {

    },
  }
</script>
<style scoped>
  * {
    list-style: none;
  }
  .title {
    color:#f3f3f3;
    font-size: 1.6rem;
    position: absolute;
    left: 8%;
    top: 4%;
    letter-spacing: 2px;
  }
  .table {
    height: 80%;
    width: 88%;
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
  }
  .roll_box {
    height: 100%;
    width: 100%;
    padding: 0;
  }
  .roll_content,
  .roll_box_title {
    width: 100%;
    color: #f3f3f3;
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    font-size: 1.6rem;
    margin: 1.8rem 0;
  }
  .rollone {
    width: 100%;
    padding-inline-start: 0;
  }
  .roll_content {
    height: 5rem;
    border-bottom: 1px dashed rgba(265,265,265,0.2);
    line-height: 5rem;
    width: 100%;
    margin: 0;
  }


</style>
